<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        *{
            padding: 0;
            margin: 0;
        }
     .box{
        width: 300px;
        height: 100%;
        background-color: rgb(50, 50, 85);
        float: left;
     }
     .box>p{
        height: 50px;
        text-align: center;
        font-size: 20px;
        line-height: 50px;
        color: white;
     }
     .box>span{
        display: block;
        height: 50px;
        font-size: 20px;
        padding-left: 20px;
        color: white;
     }
     .box>ul li{
        height: 71.5px;
        text-align: center;
        color: white;
     }
     .box2{
        flex: 1;
     }
     .top{
        height: 50px;
        border-bottom: 1px solid black;
     }
     .right{
        float: right;
     }
     img{
        height: 40px;
        width: 40px;
        border-radius: 50%;
        margin-top: 5px;
     }
     .top2{
        height: 50px;
        border-bottom: 1px solid black;
        line-height: 50px;
     }
     .top2>span{
       
        height: 40px;
   
        margin-right: 10px;
     }
     .box3{
        height: 100px;
        /* float: left; */
        overflow: hidden;
     }
     .box4{
        /* float: left; */
        overflow: hidden;
     }
     th{
        width: 160px;
        height: 40px;
        overflow: hidden;
     }
    .box5{
        margin-left: 550px;
        margin-top: 50px;
    }
    </style>
</head>
<body>
    <div class="box">
      <p>管理系统</p>
      <span>首页</span> <br>
      <span>系统管理 &nbsp;^</span>
      <ul>
        <li>用户管理</li>
        <li>角色管理</li>
        <li>菜单管理</li>
        <li>部门管理</li>
        <li>岗位管理</li>
        <li>字典管理</li>
        <li>参数设置</li>
        <li>通知公告</li>
        <li>日志管理</li>
      </ul>
      <span>系统监控</span>
    </div>
    <div class="box2">
        <div class="top">
       <span style="line-height: 50px ;margin-left: 15px;">▓</span>
       <div class="right">
        <span style="font-size: 20px;">☀</span>
        <img src="./images/yidian_116129223625.jpg" alt="">
        <span>姓名</span>
        <span>▼</span>
       </div>
        </div>
    </div>
    <div class="top2">
        <span style="margin-left:10px ; float: left;">首页</span>
        <span style="float: left;">岗位管理</span>
    </div>
    <div class="box3" style="margin-left: 50px;">
        <span>岗位名称</span>
        <input type="text" placeholder="请输入岗位名称" style="width: 200px;height: 40px;" class="kuang">
        <input type="button" value="搜索" class="sou" style="width: 70px;
        height: 40px; background-color: green;color: white;">
        <input type="button" value="重置" style="width: 70px;
        height: 40px;background-color: green;color: white;"> <br>
        <input type="button" value="新增" style="width: 70px;
        height: 40px;background-color: green;color: white;">
    </div>  <hr>
    <div class="box4">
        <table style="background-color:gray ;">
            <thead >
                <tr >
                    <th > <input type="checkbox"></th>
                    <th>岗位编号</th>
                    <th>岗位编码</th>
                    <th>岗位名称</th>
                    <th>岗位排序</th>
                    <th>状态</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>                                                                                                                                       
            </thead>
            <tbody>
    
            </tbody>
    
        </table>
        <div class="box5">
            <span class="g">共4条</span>
            <input type="button" value="<" style="width: 20px;height: 20px;" class="tops">
            <span class="j">第几页</span>
            <input type="button" value=">" style="width: 20px;height: 20px;" class="down">
        </div>
       
    </div> 
   
   

</body>
</html>
<script src="./axios.min.js"></script>
<script>
   //全局设置axios请求拦截器
axios.interceptors.request.use(
    (config) => {
        config.headers['Authorization'] = 'Bearer' + ' ' + localStorage.getItem('token');
        return config
    }, 
    (error) => {
        return Promise.reject(error)
    }

)
//全局设置axios响应拦截器
axios.interceptors.response.use(
    (res) => {
        
        return res
    }, 
    (error) => {
        if(error.response.status==401){
            alert('登陆过期！请重新登陆')
          location.href='登陆.html'
          localStorage.removeItem('token')
        }else if(error.response.status==404){
            alert('访问路径无效！') 
        }else if(error.response.status==500){
            alert('服务器内部错误！')
        }
        return Promise.reject(error)
    }

)
var sou = document.querySelector('.sou')
console.log(sou);

var inputEle = document.querySelector('.kuang')
console.log(inputEle);

sou.onclick = () => {
    console.log(777);
   axios.get('/api/search', { params:{searchkey: inputEle.value}  }).then((res) => {
        console.log(res);
        
        render(res.data.list)

    })
}

var tops = document.querySelector('.tops')
console.log(tops);

var downs = document.querySelector('.down')

let page = 1
axios.get('/api/list', { params: { page: 1, count: 2 } }).then((res) => {
    render(res.data.list)
})
tops.onclick = () => {
    if (page > 1) {
        axios.get('/api/list', { params: { page: --page, count: 4 } }).then((res) => {
            render(res.data.list)
        })
    }
}
downs.onclick = () => {
    axios.get('/api/list', { params: { page: ++page, count: 4 } }).then((res) => {
        render(res.data.list)
    })
                        
}
var delet = document.querySelector('tbody')
console.log(delet);
delet.onclick = (e) => {
    console.log(777);
    if (e.target.tagName == 'SPAN' && e.target.classList.contains(' icon-shanchu')) {

        axios.post('/api/delete', { phone: e.target.dataset.phone }).then((res) => {
          

            render(res.data.list)
        })
    }
}

function render(data) {
    var str = ''
    str = data.map((item, index) => {
        return `
        <tr>
        <th > <input type="checkbox"></th>
        <th>${item.num}</th>
        <th>${item.ema}</th>
        <th>${item.name}</th>
        <th>${item.sex}</th>
        <th>${item.tex ? '正常' : '异常'}</th>
        <th>${item.time}</th>
        <th> <span class="iconfont icon-bianji"></span> &nbsp;
        <span class="iconfont icon-shanchu" data-phone="${item.phone}"></span></th>
    </tr>
        `
    }).join('')
     document.querySelector('tbody').innerHTML = str
     document.querySelector('.box5>.j').innerHTML= `第${page}页`
}
axios.get('/api/list', { params: { page: 1, count: 4 } }).then((res) => {
    render(res.data.list)
    console.log(res.data);

})
</script>